<template>
	<view class="content">
		<view class="versionBox" v-show="versionFlag" @click.stop="false" 
			>
			<view class="box">
				{{msg}}
				<ai-progress :percentage="jindu"></ai-progress>
				{{jindu==100?"下载完成":""}}
				<button type="default" @click="updateVersion"> 更新</button>
				<button type="default" @click="versionFlag= !versionFlag,search()"> 取消</button>
			</view>
		</view>
		
		<view v-show="!versionFlag" class="">
			<view class="topnav">
				<uni-nav-bar title="首页" rightIcon="bars" @clickRight="clickRight"></uni-nav-bar>
			</view>
			<view class="sectionBox">
				<uni-section title="文字滚动" subTitle="使用 scrollable 属性使通告滚动,此时 single 属性将失效,始终单行显示" type="line">
					<uni-notice-bar show-icon scrollable show-close
						text="下拉刷新!!! uu 测试版发布，开发不易，提意见最好。" />
				</uni-section>
			</view>
			<view class="searchBox">
				<!-- 基本用法 -->
				<uni-search-bar @confirm="search" @input="input"></uni-search-bar>
			</view>
			<view class="categoryBox">
				<uni-section title="基础分组" type="line">
					<uni-group title="小说" pname="book/book">
						<uni-list>
							<uni-list v-show="bookList">
								<!-- 自定义右侧内容 -->
								<uni-list-chat :title="item.title" v-for="(item,index) in bookList" :avatar="item.cover"  
									:note="item.descs" badge-positon="left" :author="item.author" :fictionType="item.fictionType"
									 :clickable="true" @click="goPage(item,'book')">
									<view class="chat-custom-right">
										<text class="chat-custom-text">{{item.updateTime.substring(0,10)}}</text>
										<!-- 需要使用 uni-icons 请自行引入 -->
										<uni-icons type="star-filled" color="#999" size="18"></uni-icons>
									</view>
								</uni-list-chat>
							</uni-list>
							<view v-show="!bookList">
								<text>随机推荐：暂无数据,重新推荐中...</text>
							</view>
						</uni-list>
					</uni-group>
					<uni-group title="漫画" pname="cartoon/cartoon">
						<uni-grid v-show="cartoonList" :column="3" :highlight="true" :square="false" :showBorder="false">
							<uni-grid-item v-for="(item, index) in cartoonList" :index="index" :key="index"
								@click="goPage(item,'cartoon')">
								<view class="grid-item-box" style="background-color: #fff;">
									<!-- <uni-icons type="image" :size="30" color="#777" /> -->
									<view style="height: 135px; width: 100%;text-align: center;">
										<image style="height: 130px; width: 90%;" :src="item.cover" ></image>
									</view>
									<text class="text">{{item.title}}</text>
								</view>
							</uni-grid-item>
						</uni-grid>
						<view v-show="!cartoonList">
							<text>随机推荐：暂无数据,重新推荐中...</text>
						</view>
					</uni-group>
					<uni-group title="视频" pname="video/video">
						<uni-grid v-show="videoList" :column="3" :highlight="true" :square="false" :showBorder="false">
							<uni-grid-item v-for="(item, index) in videoList" :index="index" :key="index"
								@click="goPage(item,'video')">
								<view class="grid-item-box" style="background-color: #fff;">
									<view style="height: 135px; width: 100%;text-align: center;">
										<image style="height: 130px; width: 90%;" :src="item.cover" ></image>
									</view>
									<text class="text">{{item.title}}</text>
								</view>
							</uni-grid-item>
						</uni-grid>
						<view v-show="!videoList">
							<text>随机推荐：暂无数据,重新推荐中...</text>
						</view>
					</uni-group>
				</uni-section>
			</view>
		</view>
		<view class="unidrawerBox">
			<uni-drawer ref="showLeft" mode="left">
				<scroll-view style="height: 100%;background-color: #e3e3e3;" scroll-y="true" :show-scrollbar="true">
					<view style="padding-top: 40rpx;">
						<view class="leftItemSelect">
							<view @click="goOptionPage('book/book','title')" class="">
								小说
							</view>
							<view @click="goOptionPage('cartoon/cartoon','title')" class="">
								漫画
							</view>
							<view @click="goOptionPage('video/film','title')" class="">
								电影
							</view>
							<view @click="goOptionPage('video/video','title')" class="">
								电视剧
							</view>
						</view>
						<view class="leftItemSelect">
							<view class="">
								正在下载
							</view>
							<view class="">
								下载完成
							</view>
						</view>
					</view>
				</scroll-view>
			</uni-drawer>
		</view>
	</view>
</template>

<script>
	import {getRandomChineseWord,findDBShelfBook} from "@/compoment/index.js"
	export default {
		data() {
			return {
				bookList:[],
				cartoonList:[],
				videoList:[],
				key:"",
				count:0,
				versionFlag:false,
				jindu:0
			}
		},
		onLoad() {
			uni.request({
				url:"https://mock.mengxuegu.com/mock/6406e12b7c016026ff2b99f1/example/getVersion",
				success: (res) => {
					this.versionFlag =  res.data.data.version > getApp().globalData.version
					this.msg = res.data.data.msg
					// console.log(res.data.data.version , getApp().globalData.version)
					// console.log(res.data.data.version > getApp().globalData.version )
					if(this.versionFlag){
						uni.hideTabBar()
					}else{
						this.search()
					}
				}
			})			
			// this.search()
		},
		onShow(){
		},
		onPullDownRefresh() {
			this.search()
		},
		methods: {
			input(obj){
				this.key= obj
				this.search()
			},
			search(){
				this.bookList =[]
				this.cartoonList =[]
				this.videoList =[]
				this.searchBook()
				this.searchCartoon()
				this.searchVideo()
			},
			goPage(item,chapterType){
				// console.log(item)
				uni.navigateTo({
					url:`/pages/index/${chapterType}/chapter/chapter?item=${JSON.stringify(item)}`
				})
			},
			goOptionPage(uri,type){
				uni.navigateTo({
					url:uri,
					data:type
				})
			},
			searchBook(){
				uni.request({
					url: `http://lry.pingcc.cn:9010/fiction/search/title/${this.key || getRandomChineseWord()}/1/30`,
					method:"GET",
					success: ({data}) => {
						if(data.data){
							let obj = this.componentStart(data.data.length)
							this.bookList = data.data.slice(obj.start,obj.end)	
						}else{
							this.searchBook()
						}
					},
					complete() {
						uni.stopPullDownRefresh()
					}
				})
			},
			searchCartoon(){
				uni.request({
					url: `https://api.pingcc.cn/comic/search/title/${this.key || getRandomChineseWord()}/1/30`,
					method:"GET",
					success: ({data}) => {
						if(data.data){
							let obj = this.componentStart(data.data.length)
							this.cartoonList = data.data.slice(obj.start,obj.end)
						}else{
							this.searchCartoon()
						}
					},
					complete() {
						uni.stopPullDownRefresh()
					}
				})
			},
			searchVideo(){
				uni.request({
					url: `https://api.pingcc.cn/video/search/title/${this.key || getRandomChineseWord()}/1/30`,
					method:"GET",
					success: ({data}) => {
						if(data.data){
							let obj = this.componentStart(data.data.length)
							this.videoList = data.data.slice(obj.start,obj.end)
						}else{
							this.searchVideo()
						}
					},
					complete() {
						uni.stopPullDownRefresh()
					}
				})
			},
			clickRight(){
				this.$refs.showLeft.open();
			},
			componentStart(count){
				let end = Math.floor(Math.random()*count)+1
				let start = end-6
				if(start<0){
					start = 0
					end= 6
				}
				return {'start':start,'end':end}
			},
			updateVersion(){
				uni.request({
					url:"https://mock.presstime.cn/mock/6357566e3ea0490082823849/example/getVersion",
					success: ({data}) => {
						const downurl = data.data.downloadurl
						if(downurl!="" && downurl != null && downurl != undefined){
							var downloadTask = uni.downloadFile({
								url:downurl,
								// filepath:"/storage/emulated/0/Download/a.apk",
								success: (res) => {
									let tempFile = res.tempFilePath
									uni.saveFile({
										tempFilePath:tempFile,
										success: (filepath) => {
											// let st = plus.io.convertLocalFileSystemURL(tempFile)
											// console.log(plus.io.FileEntry)
											plus.runtime.openFile(tempFile)
											// uni.removeSavedFile({
											// 	filePath:filepath.savedFilePath
											// })
										}
									})
								}
							});
							downloadTask.onProgressUpdate((res) => {
								this.jindu = res.progress
								// console.log('下载进度' + res.progress);
								// console.log('已经下载的数据长度' + res.totalBytesWritten);
								// console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
							
								// 满足测试条件，取消下载任务。
								// if (res.progress > 50) {
								// 	downloadTask.abort();
								// } 
							});
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	image{will-change: transform}
	.chat-custom-right {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.chat-custom-text {
		font-size: 12px;
		color: #999;
	}

	.image {
		width: 25px;
		height: 25px;
	}

	.text {
		font-size: 14px;
		margin-top: 5px;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.swiper {
		height: 420px;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	/* #endif */
	.versionBox{
		height: 100%;
		width: 750rpx;
		background-color: transparent; 
		position: absolute;
		top: 0;left: 0;
		z-index: 999;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.box{
		width: 450rpx;
	}
	.leftItemSelect{
		padding-top: 15rpx;
		font-size: 25rpx;
		color: #c7c7c7;
		view{
			font-size: 24rpx;
			padding: 10px 20rpx;
			color: #707070;
			background-color: rgba(277, 277, 277, 0.2);
		}
		view:active{
			color: #fff;
			background-color: #707070;
		}
	}
</style>
